<template>
    <div style="padding: 10px; display: flex; align-items: flex-start; justify-content: space-between">
        <!-- 左半部分 -->
        <div class="left" style="width: 75%">
            <!-- 左上框 -->
            <div class="leftTop" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)">
                <div class="conTitle">客户资料 / {{ pageData1.name }}</div>
                <div style="padding: 10px">
                    <!-- 左上第一行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">客户666姓名</div>
                                <div class="conCon"><el-input v-model="pageData1.name" /></div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">手机号码</div>
                                <div class="conCon"><el-input v-model="pageData1.phone" /></div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">职业</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.occupation" placeholder="Select" size="large"
                                        style="width: 240px" @visible-change="handleChange">
                                        <el-option v-for="item in occupationList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 左上第二行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">学历</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.education" placeholder="Select" size="normal"
                                        @visible-change="xuelich">
                                        <el-option v-for="item in educationList" :key="item.dictCode" :label="item.dictLabel"
                                            :value="item.dictCode" />
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">所在地区</div>
                                <div class="conCon">
                                    <el-cascader v-model="pageData1.area" :options="diqullist" @change="handleChange" />


                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">微信号码</div>
                                <div class="conCon"><el-input v-model="pageData1.weixin" /></div>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 左上第三行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">年龄</div>
                                <div class="conCon">
                                    <el-input-number v-model="pageData1.age" @change="handleChange" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">QQ</div>
                                <div class="conCon"><el-input v-model="pageData1.qq" /></div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">性别</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.gender" placeholder="Select" size="normal">
                                        <el-option label="男" :value="0"></el-option>
                                        <el-option label="女" :value="1"></el-option>
                                        <el-option label="未知" :value="2"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 左上第四行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">身高</div>
                                <div class="conCon">
                                    <el-input-number v-model="pageData1.height" @change="handleChange" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">体重</div>
                                <div class="conCon">
                                    <el-input-number v-model="pageData1.weight" @change="handleChange" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">备注</div>
                                <div class="conCon"><el-input v-model="pageData1.remark" /></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!-- 左中框 -->
            <div class="leftCen" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)">
                <div class="conTitle">客户意向</div>
                <div style="padding: 10px">
                    <!-- 左中第一行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">意向分类</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.subject" placeholder="Select" size="normal"
                                        @visible-change="subjectchange">
                                        <el-option v-for="item in subjectList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">意向课程</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.course" placeholder="Select" size="normal"
                                        @visible-change="coursechange">
                                        <el-option v-for="item in courseList" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">健身原因</div>
                                <div class="conCon">
                                    <el-input v-model="pageData1.reason" @change="handleChange" />
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 左中第二行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">每周健身时间</div>
                                <div class="conCon">
                                    <el-input-number v-model="pageData1.hours" @change="handleChange" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">意向金额</div>
                                <div class="conCon">
                                    <el-input-number v-model="pageData1.money" @change="handleChange" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">其他意向</div>
                                <div class="conCon"><el-input v-model="pageData1.othenIntention" /></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!-- 左下框 -->
            <div class="leftBot">
                <div class="conTitle">沟通记录</div>
                <div style="padding: 10px">
                    <!-- 左下第一行 -->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">跟进状态</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.status" placeholder="Select" size="normal"
                                        @visible-change="statuschange">
                                        <el-option v-for="item in statusList" :key="item.dictValue" :label="item.dictLabel"
                                            :value="item.dictValue" />
                                            
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">下次跟进时间</div>
                                <div class="conCon">
                                    <el-date-picker v-model="pageData1.nextTime" type="datetime" placeholder="请选择日期" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">沟通重点</div>
                                <div class="conCon">
                                    <el-select v-model="pageData1.record1" placeholder="Select" size="normal"
                                        @visible-change="record1change">
                                        <el-option v-for="item in record1List" :key="item.dictValue" :label="item.dictLabel"
                                            :value="item.dictValue" />
                                    </el-select>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 左下第二行 -->
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple">
                                <div class="titleCon">沟通纪要</div>
                                <div class="conCon"><el-input v-model="pageData1.record2" /></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="display: flex; justify-content: right; margin-top: 20px">
                    <el-button >返回</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button type="success" @click="handleTransfer">转为成交客户</el-button>
                </div>
            </div>
        </div>
        <!-- 右半部分 -->
        <div class="right" style="width: 24%; height: 800px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)">
        <div style=" height: 30px; line-height: 30px; width: 100%;
 border-bottom: 1px #ccc solid;
padding-left: 5px; " >
             商机跟进记录
               </div>
          <div style="padding: 10px; width: 100%">
                <el-row :gutter="20">
                    <el-col :span="20" >
                        <div class="grid-content ep-bg-purple" style="">
                            <div class="titleCon" style="font-size: 18px">{{ pageData1.owner
                                }}</div>
                            <div class="conCon">{{ pageData1.belongTime }}</div>
                             </div>
                    </el-col >
                     </el-row>
                 </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
import { ElMessageBox, ElMessage, FormInstance, FormRules } from 'element-plus';
const subjectList: any[] = [];
const occupationList: any[] = [];
const diqullist: any[] = [
    {
        value: '1',
        label: '北京',
        children: [
            {
                value: '110000',
                label: '北京市'
            },
            {
                value: '110100',
                label: '北京市区'
            }
        ]
    },
    {
        value: '2',
        label: '上海',
        children: [
            {
                value: '310000',
                label: '上海市'
            },
            {
                value: '310100',
                label: '上海市区'
            }
        ]
    },
    {
        value: '3',
        label: '广州',
        children: [
            {
                value: '440000',
                label: '广东省'
            },
            {
                value: '440100',
                label: '广州市'
            }
        ]
    },
    {
        value: '4',
        label: '深圳',
        children: [
            {
                value: '440000',
                label: '广东省'
            },
            {
                value: '440300',
                label: '深圳市'
            }
        ]
    },
    {
        value: '5',
        label: '杭州',
        children: [
            {
                value: '330000',
            },
            {
                value: '330100',
                label: '杭州市'
            }
        ]
    },
    {
        value: '6',
        label: '南京',
        children: [
            {
                value: '320000',
            },
            {
                value: '320100',
                label: '南京市'
            }
        ]
    },
    {
        value: '7',
        label: '苏州',
        children: [
            {
                value: '320000',
            },
            {
                value: '320500',
                label: '苏州市'
            }
        ]
    },
    {
        value: '8',
        label: '武汉',
        children: [
            {
                value: '420000',
            },
            {
                value: '420100',
                label: '武汉市'
            }
        ]
    },
    {
        value: '9',
        label: '长沙',
        children: [
            {
                value: '430000',
            },
            {
                value: '430100',
                label: '长沙市'
            }
        ]
    },
    {
        value: '10',
        label: '郑州',
        children: [
            {
                value: '410000',
            },
            {
                value: '410100',
                label: '郑州市'
            }
        ]
    },
    {
        value: '11',
        label: '合肥',
        children: [
            {
                value: '340000',
            },
            {
                value: '340100',
                label: '合肥市'
            }
        ]
    },
];
let statusList: any[] = [];
const courseList: any[] = [];
const pageData1 = ref<any>({
    owner: '',
    belongTime: '',
    
    activityId: null,
    age: null,
    area: null,
    businessId: null,
    channelId: null,
    city: null,
    clueId: null,
    courseId: null,
    createBy: '',
    createTime: '',
    delFlag: null,
    education: '',
    endTime: null,
    failCount: 0,
    gender: 0,
    height: null,
    hours: null,
    level: null,
    money: null,
    name: '',
    nextTime: '',
    occupation: null,
    othenIntention: null,
    phone: '',
    province: null,
    qq: '',
    reason: null,
    remark: null,
    status: null,
    subject: null,
    transfer: false,
    updateBy: null,
    updateTime: '',
    weight: null,
    weixin: '',
    record1: '',
    record2: '',
    course: '',

});
import { businessxq, joblist, xueli, subjectlist, courselist, courseDetail, statuserror, jiaoliu } from '@/api/buiness';
import { useRoute } from 'vue-router';
import router from '@/router';
let record1List: any[] = [];
let educationList: any[] = []
const options: any[] = [];
const route = useRoute();
console.log(route.params.businessId);
function getList() {
    businessxq({ id: route.params.businessId }).then((res) => {
        console.log(res);
        pageData1.value = res.data;
        console.log(pageData1.value);
    })
}
getList();
function handleChange() {
    joblist({}).then((res) => {
        console.log(res);
        res.data.forEach((item: any) => {
            occupationList.push({
                value: item.dictValue,
                label: item.dictLabel,

            });
            console.log(occupationList);
        })
    })

}
function xuelich() {
    xueli({}).then((res) => {
        console.log(res,'xueli');
        // res.data.forEach((item: any) => {
        //     educationList.push({
        //         value: item.dictLabel,
        //         label: item.dictLabel,
        //     });
          
        // })
        educationList =res.data
        console.log(educationList,'res.data');
    })
      console.log(educationList);
    //强制刷新
    
}
function subjectchange() {
    subjectlist({}).then((res) => {
        console.log(res);
        res.data.forEach((item: any) => {
            subjectList.push({
                value: item.dictValue,
                label: item.dictLabel,
            });
            console.log(subjectList);
        })
    })
}
function coursechange() {
    if (pageData1.value.subject) {
        courseDetail({ subject: pageData1.value.subject }).then((res) => {
            console.log(res);
            res.data.forEach((item: any) => {
                courseList.push({
                    value: item.dictValue,
                    label: item.dictLabel,
                });
                console.log(courseList);
            })
        })
    } else {
        courselist({}).then((res) => {
            console.log(res);
            res.data.forEach((item: any) => {
                courseList.push({
                    value: item.dictValue,
                    label: item.dictLabel,
                });
                console.log(courseList);
            })
        })
    }
}
function statuschange() {
    statuserror({}).then((res) => {
        console.log(res);
        // res.data.forEach((item: any) => {
        //     statusList.push({
        //         value: item.dictValue,
        //         label: item.dictLabel,
        //     });
        //     console.log(statusList);
        // })
        statusList = res.data
        console.log(statusList,'statusList');
    })
}
function record1change() {
    jiaoliu({}).then((res) => {
        console.log(res);
        // res.data.forEach((item: any) => {
        //     record1List.push({
        //         value: item.dictValue,
        //         label: item.dictLabel,
        //     });
        //     console.log(record1List);
        // })
        record1List = res.data
        console.log(record1List,'record1List');
    })
}
function handleSave() {
  //跳转到business页面
  router.push({ path: '/business' });
}
function handleTransfer() {
     router.push({ path: '/business' });
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    min-height: 45px;
    display: flex;
    flex-wrap: wrap;

    .titleCon {
        width: 100%;
        height: 22px;
        // background-color: aqua;
        font-weight: bold;
        font-style: italic;
    }

    .conCon {
        width: 100%;
        height: 22px;
        font-size: 13px;
        color: gray;
        // background-color: blue;
    }
}

.leftTop,
.leftCen,
.leftBot,
.right {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding-bottom: 30px;
    padding-top: 10px;
}

.leftCen,
.leftBot {
    margin-top: 30px;
}

.conTitle {
    height: 30px;
    line-height: 30px;
    width: 100%;
    border-bottom: 1px #ccc solid;
    padding-left: 5px;
}

.el-input-number,
.el-date-picker,
.el-select {
    width: 100%;
}
</style>
